	<template>
	<view class="collage">
		<view class="collage-header">
			<view class="collage-header-top">
				<image src="/static/images/collage/collage-header-logo.png" class="collage-header-logo" mode=""></image>
				<!-- <view class="collage-header-search-box" @click="search">
					<image src="/static/images/collage/collage-header-search-icon.png" class="collage-header-search-icon" mode=""></image>
					<view>榴莲酥</view>
				</view> -->
				<view class="broadcast">
					<swiper class="swiper" vertical="true" autoplay="true" interval="2000" circular="true">
							<swiper-item v-for="(item,index) in samples" :key="index" v-if="samples.length>0">
									<view class="swiper-item">
										<image v-if="item.avatar_url" :src="item.avatar_url" class="broadcasticon" mode=""></image>
										<image src="/static/images/logo.png" class="broadcasticon" mode="" v-else></image>
										<view>{{ item.remark }}</view>
									</view>
							</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="collage-card-box" v-if="user">
				<view class="collage-card-top">
					<view class="left" v-if="user.group_card" >
						<view>开团红包卡</view>
						<view>{{ user.group_card.disabled_at.slice(0,10) }}到期</view>
					</view>
					<view class="left" v-else>
						<view>暂无卡片</view>
					</view>
					<view class="right" @click="goMyrecord()">
						<view>我的记录</view>
						<image src="/static/images/collage/rightMore.png" mode=""></image>
					</view>
				</view>
				<view class="collage-card-bottom-box">
					<view class="collage-card-bottom" @click="goCollageRedPackage()">
						<view>
							<image src="/static/images/collage/collage-red-package.png" class="collage-red-package" mode=""></image>
							<view>开团红包(个)</view>
						</view>
						<view>
							<view>{{ user.today_group_bonuses_count }}</view>
							<image src="/static/images/collage/rightMore.png" class="rightMore" mode=""></image>
						</view>
					</view>
					<view class="collage-card-bottom" @click="goMyPickUpGoodsList()">
						<view>
							<image src="/static/images/collage/pick-up-goods.png" class="collage-red-package" mode=""></image>
							<view>提货卡(张)</view>
						</view>
						<view>
							<view>{{ user.group_displace_card_count }}</view>
							<image src="/static/images/collage/rightMore.png" class="rightMore" mode=""></image>
						</view>
					</view>
				</view>
				<image src="/static/images/collage/blessing-bag.png" class="blessing-bag" mode="" ></image>
			</view>
			<view class="collages-strategy" @click="openStrategy()">
				<image src="/static/images/collage/collages-strategy.png" mode=""></image>
			</view>
		</view>
		<view class="collages-goods-list">
			<view class="collages-goods-list-item" v-for="(item,index) in pageItems" :key="index" @click="goCollageGoodsDetail(item.product_id,item.bonus_record)">
				<image :src="item.product.cover_url" class="goods-icon" mode=""></image>
				<view class="collages-goods-list-item-right">
					<view class="goods-describe">{{ item.product.title }}</view>
					<view class="goods-other-lable">
						<image src="/static/images/collage/free-post.png" v-if="item.product.is_sf" class="free-post" mode=""></image>
						<image src="/static/images/collage/product-hangkong.png" v-if="item.product.is_hongkong_direct" class="free-post" mode=""></image>
						<image src="/static/images/collage/product-hangkong.png" v-if="item.product.is_overseas_direct" class="free-post" mode=""></image>
						<image src="/static/images/collage/high-recommend.png" v-if="item.product.is_pop" class="high-recommend" mode=""></image>
					</view>
					<view class="red-packet">
					  <view class="red-packet-text">开团红包</view>
					  <view class="red-packet-num">
						  <image class="redbg" src="/static/images/redbg.png" mode=""></image>
						  <text class="product-brokerage">￥{{ item.bonus_record.bonus_days*item.bonus_record.bonus_money }}</text>
					  </view>
					</view>
					<view class="goods-num-info">
						<view class="goods-money">
							<text>￥</text>
							<text>{{ item.product.price_lowest }}</text>
						</view>
						<view class="goods-solded-num">已售{{ item.product.sold_count }}件</view>
					</view>
				</view>
				<image src="/static/images/collage/collages-icon.png" class="collages-icon" mode=""></image>
			</view>
		</view>
		<view class="collage-strategy-pop" @touchmove.stop.prevent="moveHandle" v-if="strategyPopShow">
			<view class="collage-strategy-pop-content">
				<image src="/static/images/collage/collages-strateg-pop-title.png" class="collages-strateg-pop-title" mode=""></image>
				<image src="/static/images/collage/close-pop.png" class="close-pop" mode="" @click="closeStrategy()"></image>
				<view class="strateg-content-item-box">
					<view class="strateg-content-item-text">1.参团者购买商品后可获得1张15天不限次数开团卡；</view>
					<view class="strateg-content-item-text">2.开团这邀请两位伙伴参团成功后可获得7天连续领取的开图红包，同时解锁一定比例的待解锁余额；</view>
					<view class="strateg-content-item-text">3.活动专区商品为临期或者微瑕疵商品不支持退换货，如有介意请勿参团；</view>
					<view class="strateg-content-item-text">4.每日领取的开团红包金额80%进入可用余额，20%进入购物金。</view>
				</view>
				<view class="confirm"  @click="closeStrategy()">我知道了</view>
			</view>
		</view>
		<image class="return-top" mode="aspectFit" v-if="isTopButtonShow" @click="returnTop" src="https://littleshop.oss-cn-beijing.aliyuncs.com/images/mini/common/return-top.png"></image>
	</view>
</template>

<script>
	import store from "store"
	import { getGroupsProducts,getMyRecordsCardList } from 'api/collageApi'
	import { mapGetters,mapActions,mapMutations } from 'vuex'
	import AuthChecking from "mixins/AuthChecking"
	import CurrentUser from "mixins/CurrentUser"
	import Pagination from "mixins/Pagination"
	export default {
		store,
		computed: {
			...mapGetters(['user'])
		},
		mixins: [
			AuthChecking,
			CurrentUser,
			Pagination
		],
		data() {
			return {
				samples:[],
				collageGoodsList:[],
				strategyPopShow:false,
				isTopButtonShow:false
			}
		},
		methods: {
			...mapMutations([
				'setDisplacesCardId'
			]),
			moveHandle(){},
			openStrategy(){
				this.strategyPopShow = true
			},
			closeStrategy(){
				this.strategyPopShow = false
			},
			search(){
				uni.navigateTo({url: '/packs/pages/collageSearch/collageSearch'})
			},
			goCollageRedPackage(){
				uni.navigateTo({url: '/packs/pages/collageRedPackage/collageRedPackage'})
			},
			goMyrecord(){
				uni.navigateTo({url: '/packs/pages/myrecord/myrecord'})
			},
			goCollageList(){
				uni.navigateTo({url: '/packs/pages/collageList/collageList'})
			},
			goCollageGoodsDetail(id,bonusrecord){
				uni.navigateTo({url: '/packs/pages/collageGoodsDetail/collageGoodsDetail?id=' + id + '&bonusrecord=' + encodeURIComponent(JSON.stringify(bonusrecord)) })
			},
			getGroupsProducts(){
				getGroupsProducts().then(res=>{
					this.collageGoodsList = res.data
				})
			},
			getMyRecordsCardList(){
				getMyRecordsCardList().then(res=>{
					this.samples = res.data
				})
			},
			goMyPickUpGoodsList(){
				uni.navigateTo({url: '/packs/pages/myPickUpGoodsList/myPickUpGoodsList'})
			},
			returnTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100
				})
			},
			async loadPageItems() {
				return await getGroupsProducts({page: this.pageNumber})
			}
		},
		async onShow() {
			this.pageNumber = 1
			this.pageItems = []
			this.pageHasNoMore = false
			this.setDisplacesCardId(null)
			this.getMyRecordsCardList()
			await this.loadPageData()
		},
		onPageScroll(e) {
			if (e.scrollTop >= 150) {
				this.isTopButtonShow = true
			} else {
				this.isTopButtonShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #FFE3D5;
	}
	.collage{
		padding-bottom: 50rpx;
	}
.collage-header{
	width: 100%;
	height:900rpx;
	background: pink;
	background:url(../../static/images/collage/collage-header-bg.png) no-repeat center;
	background-size: cover;
}
.collage-header-top{
	width: 100%;
	padding: 80rpx 0 12rpx 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.collage-header-logo{
	display: block;
	width: 270rpx;
	height: 64rpx;
	margin-left: 32rpx;
}
.collage-header-search-box{
	width: 230rpx;
	height: 64rpx;
	background: #FFFFFF;
	border-radius: 36rpx 40rpx 40rpx 36rpx;
	display: flex;
	align-items: center;
	margin-right: 32rpx;
	>image{
		display: block;
		width: 32rpx;
		height: 32rpx;
		margin:0 15rpx 0 24rpx;
	}
	>view{
		font-size: 24rpx;
		font-weight: 400;
		color: #CCCCCC;
	}
}
.broadcast{
	width:400rpx;
	height:40rpx;
	background:rgba(0,0,0,.5);
	border-radius: 24rpx;
	margin: 0rpx 50rpx 0 32rpx;
}
.swiper{
	height:40rpx;
}
.swiper-item{
	height:40rpx;
	display:flex;
	align-items: center;
	>view{
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		width:300rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	.broadcasticon{
		display: block;
		width:32rpx;
		height:32rpx;
		margin:0rpx 16rpx 4rpx 4rpx;
		border-radius: 50%;
	}
}
.collage-card-box{
	width: 686rpx;
	height:272rpx;
	background: #FFFFFF;
	border-radius: 32rpx;
	margin:12rpx auto 16rpx;
	padding-top: 30rpx;
	position: relative;
}
.collage-card-top{
	display: flex;
	justify-content: space-between;
	height: 56rpx;
	.left{
		display: flex;
		>view:nth-child(1){
			font-size: 40rpx;
			font-weight: 600;
			color: #333333;
			margin-left:48rpx;
		}
		>view:nth-child(2){
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 34rpx;
			margin:18rpx 0 0 16rpx;
		}
	}
	.right{
		display: flex;
		align-items: center;
		margin-top: 12rpx;
		>view{
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 40rpx;
		}
		>image{
			display: block;
			width: 32rpx;
			height: 32rpx;
			margin-right: 32rpx;
		}
	}
}
.collage-card-bottom-box{
	display: flex;
}
.collage-card-bottom{
	display: flex;
	flex-direction: column;
	margin-top: 46rpx;
	>view:nth-child(1){
		display: flex;
		align-items: center;
		>view:nth-child(2){
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 34rpx;
			margin:20rpx 16rpx 0 0;
		}
	}
	>view:nth-child(2){
		display: flex;
		margin-top: 20rpx;
		>view:nth-child(1){
			font-size: 48rpx;
			font-weight: 600;
			color: #333333;
			line-height: 66rpx;
			margin-left: 48rpx;
		}
	}
	
	.collage-red-package{
		display: block;
		width: 36rpx;
		height: 36rpx;
		margin:18rpx 10rpx 0 48rpx;
	}
	.rightMore{
		display: block;
		width: 24rpx;
		height: 24rpx;
		margin-top: 26rpx;
	}
}
.blessing-bag{
	display: block;
	width: 184rpx;
	height: 184rpx;
	position: absolute;
	top:180rpx;
	right:0;
	z-index:9;
}
.collages-strategy{
	width: 686rpx;
	height: 340rpx;
	margin:16rpx auto 0;
	>image{
		display: block;
		width: 100%;
		height: 100%;
	}
}
.collages-goods-list{
	width: 100%;
	background: #F6F6F6;
	background: #FFE3D5;
	border-radius: 32rpx 32rpx 0px 0px;
	margin-top: -82rpx;
	padding-top: 24rpx;
}
.collages-goods-list-item{
	width: 686rpx;
	height: 232rpx;
	background: #FFFFFF;
	border-radius: 32rpx;
	margin:0 auto 16rpx;
	display: flex;
	position: relative;
	.goods-icon{
		display:block;
		width: 232rpx;
		height: 232rpx;
		border-radius: 32rpx 0px 0px 32rpx;
	}
	.collages-goods-list-item-right{
		margin:16rpx 0 0 24rpx;
	}
	.goods-describe{
		width: 406rpx;
		height: 80rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.goods-other-lable{
		height: 30rpx;
		display: flex;
		align-items: center;
		margin-top: 4rpx;
	}
	.red-packet{
		width: fit-content;
		height: 32rpx;
		border: 2rpx solid #FC653B;
		border-radius:12rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 10rpx 0 5rpx 0rpx;
	}
	.red-packet-text{
		width: 84rpx;
		font-size: 20rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FF4924;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-left: 5rpx;
	}
	.red-packet-num{
		min-width: 84rpx;
		height: 100%;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		.redbg{
			display: block;
			width: 100%;
			height:100%;
			position: absolute;
			right: 0;
			top:0;
			z-index: 0;
			border-radius:10rpx;
		}
		.product-brokerage{
			position: relative;
			z-index: 1;
			font-size: 24rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			padding: 0 20rpx;
		}
	}
	.free-post,.high-recommend{
		display: block;
		width: 102rpx;
		height: 30rpx;
		margin-right: 8rpx;
	}
	.deliver-goods-address{
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		line-height: 34rpx;
		margin-top: 4rpx;
	}
	.goods-num-info{
		display: flex;
	}
	.goods-money{
		>text:nth-child(1){
			font-size: 24rpx;
			font-weight: 400;
			color: #FF4416;
			line-height: 34rpx;
		}
		>text:nth-child(2){
			font-size: 36rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #FF4416;
			line-height: 50rpx;
		}
	}
	.goods-solded-num{
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		line-height: 34rpx;
		margin:12rpx 0 0 24rpx;
	}
	.collages-icon{
		display: block;
		width: 114rpx;
		height: 96rpx;
		position: absolute;
		bottom: 0;
		right: 0;
	}
}
.collage-strategy-pop{
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	position: fixed;
	top:0;
	left:0;
	z-index: 999;
}
.collage-strategy-pop-content{
	width: 568rpx;
	height: 680rpx;
	background: #FFFFFF;
	border-radius: 32rpx;
	border: 2rpx solid #979797;
	position: absolute;
	left:0;
	top:0;
	bottom: 0;
	right: 0;
	margin: auto;
	padding: 0 0rpx 48rpx 0rpx;
}
.strateg-content-item-box{
	height: 500rpx;
	padding: 0 40rpx 0rpx 40rpx;
	overflow-y: auto;
}
.collages-strateg-pop-title{
	display: block;
	width: 236rpx;
	height: 64rpx;
	margin:56rpx auto 16rpx;
}
.close-pop{
	display: block;
	width: 48rpx;
	height: 48rpx;
	position: absolute;
	top:32rpx;
	right:32rpx;
}
.strateg-content-item-title{
	font-size: 28rpx;
	font-weight: 600;
	color: #333333;
	line-height: 40rpx;
	margin:32rpx 0 16rpx 0;
}
.strateg-content-item-text{
	font-size: 28rpx;
	font-weight: 400;
	color: #333333;
	line-height: 40rpx;
	margin: 20rpx 0 20rpx 0;
}
.confirm{
	width: 170rpx;
	height: 50rpx;
	border-radius: 30rpx;
	background: #FFF14D;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1rpx solid #333333;
	font-size: 26rpx;
	color:#333333;
	margin:0 auto;
}
.return-top {
	width: 96rpx;
	height: 96rpx;
	position: fixed;
	bottom: 150rpx;
	right: 32rpx;
}
</style>
